<template>
    <div id="login_background">

        <el-form :model="user" :rules="rules" ref="ruleForm"  label-width="100px" class="demo-ruleForm"
                  style="border: 2px solid white;
                        border-radius: 20px;
                        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                        width: 500px;
                        height: 300px;
                        padding: 25px;
                        background: white;
                        ">
            <div style="text-align: center;margin-bottom: 30px">
                <span style="text-align: center;
                            font-size: 30px">
                    登录
                </span>
            </div>
            <el-form-item  prop="username" >
                <el-input
                        placeholder="请输入账号"
                        prefix-icon="el-icon-user"
                        v-model="user.username"
                        style="margin-bottom: 10px">
                </el-input>
            </el-form-item>

            <el-form-item  prop="password" >
                <el-input
                        placeholder="请输入密码"
                        style="margin-top: 10px"
                        prefix-icon="el-icon-lock"
                        show-password
                        v-model="user.password">
                </el-input>
            </el-form-item>


            <div style="margin-top: 20px;">
                <el-button  v-on:click="submitForm('ruleForm')" type="success" style="margin-left: 75px;width: 100px"  >登录</el-button>
                <el-button @click="showRegister" type="warning" style="float: right;margin-right: 75px;width: 100px" >注册</el-button>
            </div>

            <el-dialog
                    title="注册"
                    :visible.sync="dialogVisible"
                    width="35%">

                <el-form ref="registerUserForm" status-icon :rules="registerRules" label-position="right" label-width="80px" :model="registerUser">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="registerUser.username" prefix-icon="el-icon-user"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="registerUser.password" prefix-icon="el-icon-lock"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPassword">
                        <el-input v-model="registerUser.checkPassword" prefix-icon="el-icon-lock"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input v-model="registerUser.nickname" prefix-icon="el-icon-mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="registerUser.phone" prefix-icon="el-icon-phone"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="registerUser.email" prefix-icon="el-icon-message"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="registerUser.address" prefix-icon="el-icon-location"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="register('registerUserForm')">确 定</el-button>
                </span>
            </el-dialog>

        </el-form>
    </div>
</template>

<script>

    import {updateDate} from "@/router";

    export default {
        name: "Login",
        data(){
            var validatePass=(rule, value, callback)=>{
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.registerUser.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return{
                user:{},
                registerUser:{},
                dialogVisible:false,
                rules:{
                    username: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                    ],
                },
                registerRules:{
                    username:[
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                    ],
                    password:[
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                    ],
                    checkPassword:[
                        {validator: validatePass, trigger: 'blur'}
                    ],
                }
            }
        },
        methods:{
            // login(){
            //     this.request.post("user/toLogin",this.user).then(res =>{
            //         if (res){
            //             this.$router.push("/");
            //         }else{
            //             this.$message.error("用户名或密码错误");
            //         }
            //     })
            // },
            submitForm(ruleForm) {
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        this.request.post("user/toLogin",this.user).then(res =>{
                                    if (res.code==="200"){
                                        localStorage.setItem("user", window.JSON.stringify(res.data));
                                        updateDate();
                                        this.$router.push("/");
                                        this.$message.success("登录成功");

                                    }else{
                                        this.$message.error(res.msg);
                                    }
                                })
                    }
                });
            },
            showRegister(){
                this.dialogVisible=true;
            },
            register(registerUserForm){
                this.$refs[registerUserForm].validate((valid) => {
                    if (valid) {
                        this.dialogVisible = false;
                        this.request.post("user/register",this.registerUser).then(res =>{
                            if (res.code ==='200' ){
                                this.$message.success("注册成功");
                            }else{
                                this.$message.error(res.msg);
                            }
                        })
                    }
                });

            },
        }
    }
</script>

<style scoped>


    /deep/ .el-form .el-form-item .el-form-item__content {
                 margin-left: 0px !important;
    }



    #login_background{
        height: 100vh;
        background-image: linear-gradient(90deg, rgba(115,78,154,1) 0%, rgba(89,178,179,1) 12%, rgba(70,217,139,1) 35%, rgba(181,245,120,1) 75%, rgba(144,241,194,1) 92%);;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;  /* 垂直布局 */
        justify-content: center; /* 沿主轴居中 */
        align-items: center; /* 沿交叉轴居中 */
    }

    /deep/ .el-form-item__content{
        margin-left: 10px;
        display: inline-block;
        width: 450px;
    }

</style>